<template>
    <div id="container">
        <span>提示</span>
        <p>这是一个自定义的公共组件</p>
        <span>{{parentMessages}}</span>
        <p></p>
        <!-- <button v-on="sendToFather(this)">点击</button> -->
        <input v-model="sonValue" @change="sendToFather" />
        <p>{{sonValue}}</p>
    </div>
</template>
<script>
// 子组件
export default {
    name: 'v-tips',
    data() {
    return {
        sonValue: ''
        }
    },
    // 推荐使用的父子组件消息传递的方式
    props: {
        parentMessages: {
            type: String,
            default: '默认显示的信息',
            require: true // 必填
        }
    },
    methods: {
        // 调用父组件方法，向父组件传值
        sendToFather() {
            console.log(this.sonValue)
            this.$emit('parentMethods', {'name':'张三', 'props': this.sonValue})
        }
    }
}
</script>
<style scoped>
#container {
    border: 1px #323885 dashed;
    border-radius: 5px;
    background: #117cb9;
    color: #f0eeec;
}
</style>